<template>
  <el-dialog :visible.sync="dialogVisible" custom-class="add_record_data" :before-close="cancel" >
    <template slot="title">
      <span>补录数据</span>
    </template>
    <el-form
      ref="refForm"
      :rules="refRule"
      :disabled="loading"
      label-width="100px"
      :model="form" class="demo-form-inline">

      <el-form-item label="游戏平台" prop="gamePlatform" >
        <el-select v-model="form.gamePlatform ">
          <el-option
            v-for="item in GAME_PLATFORM_LIST.filter((item)=>{return item.type.includes('dataAddRecord')})"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <div v-if="[1001,1004,1003].includes(form.gamePlatform)">
        <el-form-item prop="fileFolder" label="文件路径" >
          <el-input v-model.trim="form.fileFolder" maxlength="200">
          </el-input>
        </el-form-item>
        <el-form-item label="文件名称">
          <el-input type="textarea" rows="4" v-model.trim="form.fileName " maxlength="200" placeholder="包含格式，多个文件以英文逗号分隔">
          </el-input>
        </el-form-item>
      </div>
      <el-form-item label="补录时间"  prop="time" v-else>
        <el-date-picker
          class="date-picker-box"
          v-model="form.time"
          type="datetimerange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="数据类型" prop="dataType" width="300px" v-if="![1001,1004,1003].includes(form.gamePlatform)">
        <el-select v-model="form.dataType ">
          <el-option
            label="请选择"
            value=""
          ></el-option>
          <el-option
            v-for="item in DATA_TYPE_LIST"
            :label="item.title"
            :key="item.value"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>

      <!-- <el-form-item prop="fileFolder" label="文件">
       <editor-app color="#1890ff" class="editor-upload-btn"
       :limit="1"
       v-model="form.url"
       @successCBK="appSuccessCBK"></editor-app>

       </el-form-item> -->
      <el-form-item prop="remark" label="备注">
        <el-input type="textarea" rows="3" v-model.trim="form.remark" maxlength="100">
        </el-input>
      </el-form-item>
      <div style="text-align:right">
        <el-button class="filter-item"
                   @click="cancel">取消
        </el-button>
        <el-button class="filter-item" type="primary" :loading="!istap"
                   @click="toSave">确认
        </el-button>
      </div>
    </el-form>

  </el-dialog>
</template>
<script>
import {
  form, grid, factory, pickerOption,
} from '@/build';
import { manualjobsListAdd } from '@/services/api/gameDataManage';
// import EditorApp from '@/components/Tinymce/components/editorApp';
import { GAME_PLATFORM_LIST, DATA_TYPE_LIST } from '../data';

export default {
  name: 'add-account-dialog',
  mixins: [form, grid, factory],
  pickerOption,
  props: ['dialogVisible'],
  components: {},
  data() {
    return {
      GAME_PLATFORM_LIST,
      DATA_TYPE_LIST,
      istap: true,
      form: {
        time: [
          moment().format('YYYY-MM-DD 00:00:00'),
          moment().format('YYYY-MM-DD 23:59:59'),
        ],
        fileFolder: '',
        fileName: '',
        gamePlatform: undefined,
        dataType: undefined,
        startTime: undefined,
        endTime: undefined,
        remark: '',
      },
      refRule: {
        time: [
          { required: true, message: '补录为必选项', trigger: 'change' },
        ],
        // dataType: [
        //   {required: true, message: '数据类型为必选项', trigger: 'change'},
        // ],
        gamePlatform: [
          { required: true, message: '游戏平台为必选项', trigger: 'change' },
        ],
        fileFolder: [
          { required: true, message: '文件路径不能为空', trigger: 'change' },
        ],
        // fileName: [
        //   { required: true, message: '文件名称不能为空', trigger: 'change' },
        // ],
        // remark: [
        //   { required: true, message: '备注不能为空', trigger: 'blur' },
        // ],
      },
    };
  },

  filters: {},

  methods: {
    appSuccessCBK(val) {
      // console.log(`文件=====${JSON.stringify(val)}`);
    },
    cancel() {
      this.$emit('cancel');
    },
    toSave() {
      if (!this.istap) return;
      this.$refs.refForm.validate((valid) => {
        if (valid) {
          this.istap = false;
          this.doSave({ action: 'saveForm' });
        } else {
          return false;
        }
      });
    },

  },
  mounted() {
    this.bindSave(manualjobsListAdd, 'saveForm', 'form', {
      beforeSend: (data) => {
        if (data.time) {
          data.startTime = data.time[0];
          data.endTime = data.time[1];
        }
        return data;
      },
      callback: ([result, data]) => {
        this.cancel();
        this.istap = true;
        if (result) {
          this.$parent.getAll();
          this.$notify({
            title: '保存成功',
            type: 'success',
            duration: 2000,
          });
        } else {
          this.$notify({
            title: `保存失败.${data && data.message}`,
            type: 'error',
            duration: 2000,
          });
        }
      },
    });
  },

};
</script>

<style lang="scss" scoped>
  /deep/ {
    .add_record_data{
      width: 40%;
      min-width: 585px;
    }
    .el-form-item{
      .el-form-item__content{
        width:calc(90% - 150px);
        .el-select{
          width: 100%;
        }
        .el-date-editor{
          width:100%;
        }
      }
    }
  }
</style>
